/**
 * 展示支付二维码弹窗,并轮询支付结果
 */
import {
  getOnceOrderDetail,
} from '@/services/order/api';
import { isNull } from '@/utils/utils';
import { ModalForm } from '@ant-design/pro-form';
import { Button, message } from 'antd';
import QRCode from 'qrcode.react';
import React, { useEffect, useState } from 'react';
import { useModel } from 'umi';
import PrintBillHTML from '../PrintBillHTML';

interface MyProps {
  id: string;
  onClose: Function;
  onPrint: Function;
}


let timerId;

const Result: React.FC<MyProps> = (props) => {
  const { id, onClose, onPrint } = props;
  const [orderObj, setOrderObj] = useState({});

  const { initialState } = useModel('@@initialState');

  const [billPrinting, setBillPrinting] = useState<boolean>(false);

  // 10s轮询一次支付结果
  const timer = (callback) => {
    timerId = setInterval(() => { callback?.() }, 10000);
  }
  const init = (callback) => {
    if (!isNull(id) && isNull(orderObj.order_id)) {
      getOnceOrderDetail(id).then(data => {
        setOrderObj(data);
        if (data.order_status === 'P') {
          // if (!isNull(timerId)) {
          clearInterval(timerId);
          timerId = null;
          message.success('已支付', 1, () => {
            onClose()
          })
        }
        // 待支付状态需要10s轮询
        if (data.order_status === 'W') {
          callback?.();
        }
      });
    }
  }

  useEffect(() => {
    init(() => {
      timer(init);
    });

  }, []);

  console.log('ygData', orderObj)
  return (
    <ModalForm
      title={null}
      visible
      layout='horizontal'
      width={'50%'}
      modalProps={{
        onCancel: () => { clearInterval(timerId); onClose() }
      }}
      submitter={{
        render: (props, defaultDoms) => [
          <Button onClick={() => { clearInterval(timerId); onClose() }}>知道了</Button>,
          initialState?.currentUser?.dept_type === 'Y' &&
          <Button type='primary' onClick={() => { clearInterval(timerId); setBillPrinting(true); }}>打印票据单</Button>,
          <Button type='primary' onClick={() => { clearInterval(timerId); onPrint() }}>打印结算单</Button>
        ]
      }}
      initialValues={{
        ...orderObj
      }}
    >
      {/* <div style={{ textAlign: 'center', borderBottom: '1px #000 solid', paddingBottom: 10 }}>订单提交成功，请在<span className='org bold'>【{orderObj.pay_valid_time}】</span>前到<span className='org bold'>【{orderObj.window_no}】</span>完成缴费</div> */}
      <div style={{ textAlign: 'center', borderBottom: '1px #000 solid', paddingBottom: 10 }}>订单提交成功，请在<span className='org bold'>【{orderObj.pay_valid_time}】</span>前完成缴费</div>
      {!isNull(orderObj.pay_qr_code_url) && <div style={{ textAlign: 'center' }}><QRCode style={{ width: '100px', height: '100px', margin: '15px auto 10px' }} renderAs="svg" value={orderObj.pay_qr_code_url} /></div>}
      <div style={{ textAlign: 'center', fontSize: 12 }}>支付二维码</div>

      {
        billPrinting && <PrintBillHTML data={orderObj} after={() => setBillPrinting(false)} />
      }
    </ModalForm>
  );
};

export default Result;
